<template>
  <div class="workbench-summarylist">
    <div style="display: none">{{refresh}}</div>
    <div class="workbench-title">
      {{$t('workbench.workView')}}
      <div class="fr top-choose">
      <span class="top-day" ds-attr='day' v-bind:class = "{top_active: activeSlip=='day'}" v-on:click.stop="active('day')">{{$t('workbench.day')}}</span>
      <span class="top-month" ds-attr='month' v-bind:class = "{top_active: activeSlip=='month'}" v-on:click.stop="active('month')">{{$t('workbench.month')}}</span>
    </div>
      <!--<el-row>-->
        <!--<el-col :span="12">-->
          <!--{{ refresh }}-->
          <!--{{ $t("workbench.summaryDay") }}-->
        <!--</el-col>-->
        <!--<el-col :span="12">-->
          <!--{{ $t("workbench.summaryMonth") }}-->
        <!--</el-col>-->
      <!--</el-row>-->
    </div>
    <div class="workbench-summarylist-content">
      <el-row>
        <el-col v-show="showDayData" :span="24">
          <div class="call-left">
            <div class="waihu-div">
              <div><span class="call-out-sp"><i class="icon iconfont icon-waihu"></i></span></div>
              <div class="call-title">{{$t('workbench.waiCall')}}</div>
              <div class="call-time">{{DialoutTimeLength}}</div>
            </div>
            <div class="huru-div">
              <div><span class="call-in-sp"><i class="icon iconfont icon-huru"></i></span></div>
              <div class="call-title">{{$t('workbench.ruCall')}}</div>
              <div class="call-time">{{DialinTimeLength}}</div>
            </div>
          </div>
            <div class="workbench-summarylist-today">
              <workbenchSummarylistPercent v-bind:data="todayCdrData" color="#d498e9"
                                           :isWarn="true"
                                           :complete-desc="$t('workbench.answer')"
                                           :uncomplete-desc="$t('workbench.missed')"
                                           :percent-desc="$t('workbench.callInRate')">
              </workbenchSummarylistPercent>
              <workbenchSummarylistPercent v-bind:data="todayOutCdrData" color="#d498e9"
                                           :complete-desc="$t('workbench.breathe')"
                                           :uncomplete-desc="$t('workbench.connect')"
                                           :percent-desc="$t('workbench.callOutRate')">
              </workbenchSummarylistPercent>
              <workbenchSummarylistPercent v-bind:data="todayTransferCdrData" color="#d498e9"
                                           :complete-desc="$t('workbench.answer')"
                                           :uncomplete-desc="$t('workbench.missed')"
                                           :percent-desc="$t('workbench.transCallRate')">
              </workbenchSummarylistPercent>
              <workbenchSummarylistPercent v-bind:data="todayWxData" color="#fe7c7c"
                                           :complete-desc="$t('workbench.timelyProcessing')"
                                           :uncomplete-desc="$t('workbench.seNoProcessing', {instantRespTime})"
                                           :percent-desc="$t('workbench.wxRespRtae')"
              ></workbenchSummarylistPercent>
              <workbenchSummarylistPercent v-bind:data="todayWbData" color="#8bdcdf"
                                           :complete-desc="$t('workbench.timelyProcessing')"
                                           :uncomplete-desc="$t('workbench.noProcessing')"
                                           :percent-desc="$t('workbench.weiboRespRtae')"
              ></workbenchSummarylistPercent>
              <workbenchSummarylistPercent v-bind:data="todayInternetData" color="#f8cb00"
                                           :complete-desc="$t('workbench.timelyProcessing')"
                                           :uncomplete-desc="$t('workbench.seNoProcessing', {instantRespTime})"
                                           :percent-desc="$t('workbench.imRespRtae')"
              ></workbenchSummarylistPercent>
              <workbenchSummarylistPercent v-bind:data="todayAppData" color="#65c3df"
                                           :complete-desc="$t('workbench.timelyProcessing')"
                                           :uncomplete-desc="$t('workbench.seNoProcessing', {instantRespTime})"
                                           :percent-desc="$t('workbench.appRespRtae')"
              ></workbenchSummarylistPercent>
              <workbenchSummarylistPercent v-bind:data="todayMailData" color="#999"
                                           :complete-desc="$t('workbench.timelyProcessing')"
                                           :uncomplete-desc="$t('workbench.miNoProcessing')"
                                           :percent-desc="$t('workbench.mailRespRtae')"
              ></workbenchSummarylistPercent>
            </div>
        </el-col>
        <el-col v-show="showMonthData" :span="24">
          <div class="call-left">
            <div class="waihu-div">
              <div><span class="call-out-sp"><i class="icon iconfont icon-waihu"></i></span></div>
              <div class="call-title">{{$t('workbench.waiCall')}}</div>
              <div class="call-time">{{monDialoutTimeLength}}</div>
            </div>
            <div class="huru-div">
              <div><span class="call-in-sp"><i class="icon iconfont icon-huru"></i></span></div>
              <div class="call-title">{{$t('workbench.ruCall')}}</div>
              <div class="call-time">{{monDialinTimeLength}}</div>
            </div>
          </div>
          <div class="workbench-summarylist-month">
            <workbenchSummarylistPercent v-bind:data="monthCdrData" color="#d498e9"
                                         :isWarn="true"
                                         :complete-desc="$t('workbench.answer')"
                                         :uncomplete-desc="$t('workbench.missed')"
                                         :percent-desc="$t('workbench.callInRate')"></workbenchSummarylistPercent>
            <workbenchSummarylistPercent v-bind:data="monthCallOutData" color="#d498e9"
                                         :complete-desc="$t('workbench.breathe')"
                                         :uncomplete-desc="$t('workbench.connect')"
                                         :percent-desc="$t('workbench.callOutRate')"></workbenchSummarylistPercent>
            <workbenchSummarylistPercent v-bind:data="monthTransferCdrData" color="#d498e9"
                                         :complete-desc="$t('workbench.answer')"
                                         :uncomplete-desc="$t('workbench.missed')"
                                         :percent-desc="$t('workbench.transCallRate')">
            </workbenchSummarylistPercent>
            <workbenchSummarylistPercent v-bind:data="monthWxData" color="#fe7c7c"
                                         :complete-desc="$t('workbench.timelyProcessing')"
                                         :uncomplete-desc="$t('workbench.seNoProcessing', {instantRespTime})"
                                         :percent-desc="$t('workbench.wxRespRtae')"
              ></workbenchSummarylistPercent>
            <workbenchSummarylistPercent v-bind:data="monthWbData" color="#8bdcdf"
                                         :complete-desc="$t('workbench.timelyProcessing')"
                                         :uncomplete-desc="$t('workbench.noProcessing')"
                                         :percent-desc="$t('workbench.weiboRespRtae')"
            ></workbenchSummarylistPercent>
            <workbenchSummarylistPercent v-bind:data="monthInternetData" color="#f8cb00"
                                         :complete-desc="$t('workbench.timelyProcessing')"
                                         :uncomplete-desc="$t('workbench.seNoProcessing', {instantRespTime})"
                                         :percent-desc="$t('workbench.imRespRtae')"
              ></workbenchSummarylistPercent>
            <workbenchSummarylistPercent v-bind:data="monthAppData" color="#65c3df"
                                         :complete-desc="$t('workbench.timelyProcessing')"
                                         :uncomplete-desc="$t('workbench.seNoProcessing', {instantRespTime})"
                                         :percent-desc="$t('workbench.appRespRtae')"
              ></workbenchSummarylistPercent>
            <workbenchSummarylistPercent v-bind:data="monthMailData" color="#999"
                                         :complete-desc="$t('workbench.timelyProcessing')"
                                         :uncomplete-desc="$t('workbench.miNoProcessing')"
                                         :percent-desc="$t('workbench.mailRespRtae')"
              ></workbenchSummarylistPercent>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import workbenchSummarylistPercent from './SummaryListPercent'
  import {getCallTimeLength} from '@/utils/m7Utils.js'
  export default {
    name: 'workbenchsummarylist',
    props: {
      summaryList: Object
    },
    components: {
      workbenchSummarylistPercent
    },
    data () {
      return {
        showDayData: true,
        showMonthData: false,
        activeSlip: 'day',
        todayCdrData: {
          all: this.summaryList.todayCdrData.all,
          complete: this.summaryList.todayCdrData.complete,
          iconClass: ['icon-huru', 'call-in']
        },
        todayOutCdrData: {
          all: this.summaryList.todayOutCdrData.all,
          complete: this.summaryList.todayOutCdrData.complete,
          iconClass: ['icon-huchu', 'call-out']
        },
        todayTransferCdrData: {
          all: this.summaryList.todayTransferCdrData.all,
          complete: this.summaryList.todayTransferCdrData.complete,
          iconClass: ['icon-huchu', 'call-out']
        },
        todayWxData: {
          all: this.summaryList.todayWxData.all,
          complete: this.summaryList.todayWxData.complete,
          iconClass: 'icon-weixinzixun'
        },
        todayInternetData: {
          all: this.summaryList.todayInternetData.all,
          complete: this.summaryList.todayInternetData.complete,
          iconClass: 'icon-hulianwang'
        },
        todayAppData: {
          all: this.summaryList.todayAppData.all,
          complete: this.summaryList.todayAppData.complete,
          iconClass: 'icon-yidongduan'
        },
        todayWbData: {
          all: this.summaryList.todayWbData.all,
          complete: this.summaryList.todayWbData.complete,
          iconClass: 'icon-weibo',
          percentDesc: '响应率',
          completeDesc: '及时处理',
          uncompleteDesc: '未及时处理'
        },
        todayMailData: {
          all: this.summaryList.todayMailData.all,
          complete: this.summaryList.todayMailData.complete,
          iconClass: 'icon-gongzuotaiyoujian'
        },
        monthCdrData: {
          all: 0,
          complete: 0,
          iconClass: ['icon-huru', 'call-in']
        },
        monthCallOutData: {
          all: 0,
          complete: 0,
          iconClass: ['icon-huchu', 'call-out']
        },
        monthTransferCdrData: {
          all: 0,
          complete: 0,
          iconClass: ['icon-huchu', 'call-out']
        },
        monthWxData: {
          all: 0,
          complete: 0,
          iconClass: 'icon-weixinzixun'
        },
        monthInternetData: {
          all: 0,
          complete: 0,
          iconClass: 'icon-hulianwang'
        },
        monthAppData: {
          all: 0,
          complete: 0,
          iconClass: 'icon-yidongduan'
        },
        monthWbData: {
          all: 0,
          complete: 0,
          iconClass: 'icon-weibo',
          percentDesc: '响应率',
          completeDesc: '及时处理',
          uncompleteDesc: '未及时处理'
        },
        monthMailData: {
          all: 0,
          complete:0,
          iconClass: 'icon-gongzuotaiyoujian'
        },
        DialinTimeLength: '00:00:00',
        DialoutTimeLength: '00:00:00',
        monDialinTimeLength: '00:00:00',
        monDialoutTimeLength: '00:00:00',
        instantRespTime: '40s',
        summaryListMonth:{},
        flag:true
      }
    },
    methods: {
      active: function (date) {
        if (date === 'day') {
          this.activeSlip = 'day'
          this.showDayData = true
          this.showMonthData = false
        } else {
          this.activeSlip = 'month'
          this.showDayData = false
          this.showMonthData = true
          // 月数据
          // 请求一遍后不在请求
          if(this.flag) {
           this.getMonthData()
          }
        }
      },
      getMonthData(){
        this.$store.dispatch('queryAgentMultiChannelMonthUpData').then(res => {
          if(res && res.success) {
            this.summaryListMonth = res.summaryList
            this.monDialinTimeLength = getCallTimeLength(this.summaryListMonth.monthCallTimeLength.in)
            this.monDialoutTimeLength = getCallTimeLength(this.summaryListMonth.monthCallTimeLength.out)
            this.$set(this.monthCdrData,'all',this.summaryListMonth.monthCdrData.all)
            this.$set(this.monthCdrData,'complete',this.summaryListMonth.monthCdrData.complete)
            this.$set(this.monthCallOutData,'all',this.summaryListMonth.monthCallOutData.all)
            this.$set(this.monthCallOutData,'complete',this.summaryListMonth.monthCallOutData.complete)
            this.$set(this.monthTransferCdrData,'all',this.summaryListMonth.monthTransferCdrData.all)
            this.$set(this.monthTransferCdrData,'complete',this.summaryListMonth.monthTransferCdrData.complete)
            this.$set(this.monthWxData,'all',this.summaryListMonth.monthWxData.all)
            this.$set(this.monthWxData,'complete',this.summaryListMonth.monthWxData.complete)
            this.$set(this.monthInternetData,'all',this.summaryListMonth.monthInternetData.all)
            this.$set(this.monthInternetData,'complete',this.summaryListMonth.monthInternetData.complete)
            this.$set(this.monthAppData,'all',this.summaryListMonth.monthAppData.all)
            this.$set(this.monthAppData,'complete',this.summaryListMonth.monthAppData.complete)
            this.$set(this.monthMailData,'all',this.summaryListMonth.monthMailData.all)
            this.$set(this.monthMailData,'complete',this.summaryListMonth.monthMailData.complete)
            this.flag = false
          } else {
            this.summaryListMonth = {}
          }
        })
      },
      load(){
        this.flag = true
        if(this.activeSlip == 'month'){
          if (this.flag) {
           this.getMonthData()
          }
        }
      }
    },
    computed: {
      refresh: function () {
        this.DialinTimeLength = this.summaryList.DialinTimeLength
        this.DialoutTimeLength = this.summaryList.DialoutTimeLength
        this.todayOutCdrData.all = this.summaryList.todayOutCdrData.all
        this.todayTransferCdrData.all = this.summaryList.todayTransferCdrData.all
        this.todayAppData.all = this.summaryList.todayAppData.all
        this.todayCdrData.all = this.summaryList.todayCdrData.all
        this.todayWxData.all = this.summaryList.todayWxData.all
        this.todayInternetData.all = this.summaryList.todayInternetData.all
        this.todayWbData.all = this.summaryList.todayWbData.all
        this.todayMailData.all = this.summaryList.todayMailData.all
        this.todayTransferCdrData.complete = this.summaryList.todayTransferCdrData.complete
        this.todayAppData.complete = this.summaryList.todayAppData.complete
        this.todayOutCdrData.complete = this.summaryList.todayOutCdrData.complete
        this.todayCdrData.complete = this.summaryList.todayCdrData.complete
        this.todayWxData.complete = this.summaryList.todayWxData.complete
        this.todayInternetData.complete = this.summaryList.todayInternetData.complete
        this.todayWbData.complete = this.summaryList.todayWbData.complete
        this.todayMailData.complete = this.summaryList.todayMailData.complete
      }
    },
  }
</script>
<style scoped lang="stylus">
  @import "styl/_workbench.styl"
  @import '../../../assets/common.styl'
  .top_active
    color $c-main
    box-sizing  border-box
    border-bottom  3px solid $c-main
  .workbench-summarylist
    float left
    width calc(38% - 12px)
    margin 5px
    border 1px solid #e7e7eb
    height 404px
    background $cf-white
    .call-left
      height: 363px;
      width 25%
      border-right: 1px dashed #e7e7eb;
      float left
    .call-title
      font-size: 12px;
      margin-top: 15px;
    .call-time
      font-size 18px
    .waihu-div
      text-align center
      margin-top 50px
    .huru-div
      text-align center
      margin-top 92px
    .call-out-sp
      color: #fff;
      background-color: #59af58;
      border-radius: 50%;
      padding: 9px 8px 7px 8px;
    .call-in-sp
      color: #fff;
      background-color: #f09637;
      border-radius: 50%;
      padding: 8px 8px 7px 8px;
    .workbench-title
      position  relative
      color $cf-gray2
      .top-choose
        position  absolute
        right  25px
        top  0
        span
          display  block
          float  left
          margin-left  10px
          min-width  28px
          height  40px
          cursor pointer
  .workbench-summarylist-today
    width: calc(100% - 26%);
    margin-left: 26%;
    padding 20px 0px
  .workbench-summarylist-month
    width: calc(100% - 26%);
    margin-left: 26%;
    padding 20px 0px
</style>
